<!-- setup简写 这种情况下 script 中的所有都会 return 所以就不用再写 return -->
<script setup>
  // 导入响应式函数 ref
  import { ref, reactive } from 'vue';
  
  const str = ref('hello world');
  const obj = reactive({
    name: 'lisi',
    age: 12
  })
  const fn = () => {
    return 123;
  }
</script>

<template>
  <!-- 1. 直接变量 -->
  <h1> {{ str }} </h1>
  <!-- 1. 对象索引 -->
  <p> hi 我是 {{ obj.name }} 今年 {{ obj.age }} 岁了</p>
  <!-- 2. 算数运算 -->
  <p>明年我 {{ obj.age + 1 }} 岁了</p>
  <!-- 2. 三元运算 -->
  <p> 我 {{ obj.age >= 18 ? '成年了' : '未成年' }} </p>
  <!-- 3. 方法调用 -->
  <p>{{ str }} 有 {{ str.split(" ").length }} 个单词</p>
  <!-- 3. 函数调用 -->
  <p> fn() 的返回值是： {{ fn() }}</p>
</template>

<style scoped>

</style>